<template>
    <div class="box-Details">
        <el-card class="pag-container">
            <el-row>
                <el-col :span="14" :align="'left'">
                    <span style="font-size: 16px;font-weight: 600;">{{ param.companyName }}</span>
                </el-col>
                <el-col :span="10" :align="'right'">
                    <el-button type="primary" link plain icon="ChatDotSquare">联系客服</el-button>
                </el-col>
            </el-row>

            <el-row> 
                <el-col :span="8" class="marginTop20"> <Carousel v-bind="swiperData" ></Carousel></el-col>
                <el-col :offset="1" :span="14">
                    <el-row>
                        <el-col :span="24">
                            <strong>{{param.carryCityName}}</strong>
                            <br/>
                            <span style="color: #999;font-size: 14px;"> 求购箱城市：{{param.carryCityName}} / {{param.carryCountryName}}</span>
                        </el-col>
                    </el-row>
                    <el-row align="middle">
                        <el-col :span="4" class="marginTop10">求购单价</el-col><el-col :span="18" class="marginTop10" style="color: #ff0000;">{{param.currency}} {{param.unitPrice}}</el-col>
                        <el-col :span="4" class="marginTop10">可结算币种</el-col><el-col :span="18" class="marginTop10"> {{ param.payCurrency }}</el-col>
                        <el-col :span="4" class="marginTop10">箱型</el-col><el-col :span="18" class="marginTop10">
                            <el-radio-group v-model="param.boxType" @change="boxTypeChange" aria-readonly="true">
                                <el-radio-button v-for="item in boxInfo.boxTypeInfo" :label="item.label" :key="item"
                                :value="item.value" />
                            </el-radio-group>
                        </el-col>
                        <el-col :span="4" class="marginTop10">箱况</el-col><el-col :span="18" class="marginTop10">
                            <el-radio-group v-model="param.boxCondition" @change="boxConditionChange" aria-readonly="true">
                                <el-radio-button v-for="item in boxInfo.boxConditionInfo1" :label="item.label" :key="item"
                                :value="item.value" />
                            </el-radio-group>
                        </el-col>
                        <!-- <el-col :span="4" class="marginTop10">求购量</el-col><el-col :span="18" class="marginTop10">{{param.inventory}}个</el-col> -->
                        <el-col :span="4" class="marginTop10">预计提箱日期</el-col><el-col :span="18" class="marginTop10">
                            {{ formatDate(param.planPickupDate, 2) || '--' }}
                        </el-col>
                        <el-col :span="4" class="marginTop10">发票类型</el-col><el-col :span="18" class="marginTop10">{{param.invoiceType}}</el-col>
                        <el-col :span="6" class="marginTop50"><el-button icon="ChatDotSquare" type="primary" plain style="width: 40%;">咨询</el-button></el-col>
                    </el-row>
                    
                </el-col>
            </el-row>
        </el-card>
        <el-card class="marginTop20">
            <p class="_before">求购箱详情</p>
            <el-row>
                <el-col :span="4">箱型：{{ boxInfo.boxTypeInfo2[param.boxType] }}</el-col>
                <el-col :span="4">箱况：{{ boxInfo.boxConditionInfo2[param.boxCondition] }}</el-col>
                <el-col :span="4">总重：{{ param.totalWeight }}</el-col>
            </el-row>
        </el-card>
        <el-card class="marginTop20">
            <p class="_before">图文详情</p>
            <el-row>
                <el-col :span="24" v-for="(item,index) in param.detailFileList" :key="index">
                    <template v-if="item.imgInfo[0]?.url">
                        <el-image fill :src="item.imgInfo[0]?.url"></el-image>
                    </template>
                    <template v-else>
                        <p class="text-center">当前箱子没有详情图片</p>
                    </template>
                    <p class="description">{{item.textVal}}</p>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import  Carousel from '@/components/carousel'
import { formatDate } from '@/utils'
import { onActivated, onMounted,reactive } from 'vue'
import { getSaleBoxSelectDetail } from '@/api/boxDeal/boxSeel';
import boxInfo from '@/constant/containerInfo';
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
const route = useRoute();

// onMounted(() => {
// })

const param = reactive({
    companyName: '',
    carryCityName:'',
    carryCountryName:'',
    releaseSalePriceList:[],
    currency:'',
    unitPrice:'',
    payCurrency:'',
    boxType:'',
    boxCondition:'',
    inventory:'',
    planPickupDate:'',
    invoiceType:'',
    totalWeight:'',
    detailFileList:[]
})
onActivated(() => {
    if(!route.query.releaseSaleId) return
    getSaleBoxSelectDetail(route.query.releaseSaleId).then(res => {
        param.companyName = res.data.companyName
        param.carryCityName = res.data.carryCityName
        param.carryCountryName = res.data.carryCountryName
        param.payCurrency = checkPayCurrency(res.data.payCurrency)
        param.planPickupDate = res.data.planPickupDate
        param.releaseSalePriceList = res.data.releaseSalePriceList
        param.detailFileList = JSON.parse(res.data.detailFileList)
        param.invoiceType = checkInvoiceType(res.data.invoiceType)
        swiperData.list= JSON.parse(res.data.mainFileList)
        const showId = route.query.id 
        res.data.releaseSalePriceList.forEach((item:any) => {
            if(item.id == showId){
                param.unitPrice = item.unitPrice
                param.currency = item.currency == 'USD'?'$':'￥'
                param.boxType = item.boxType
                param.boxCondition = item.boxCondition
                param.inventory = item.inventory,
                param.totalWeight = item.totalWeight
            }
        })
        
        
    })
})

const swiperData = reactive({
  list: [],
  config: {
    width:"100%",
    height:"450px"
  }
})

const boxTypeChange = (val:any) => {
    param.releaseSalePriceList.forEach((item:any) => {
        if(item.boxType == val){
            param.boxCondition = item.boxCondition
        }else{
            param.boxCondition = ""
            // ElMessage.warning('当前箱型没有对应箱况，请重新选择')
        }
    })
}
const boxConditionChange = (val:any) => {
    param.releaseSalePriceList.forEach((item:any) => {
        if(item.boxCondition == val){
            param.boxType = item.boxType
        }else{
            param.boxType = ""
            // ElMessage.warning('当前箱况没有对应箱型，请重新选择')
        }
    })
}

const checkPayCurrency = (val:string)=>{
    switch (val) {
        case 'USD':
            return '美元'
        case 'CNY':
            return '人民币'
        case 'USD,CNY':
            return '美元、人民币'
        case 'CNY,USD':
            return '人民币、美元'
        default:
            return '--'
    }

}
// 5-增值税普通发票  10-增值税专用发票 15-形式发票
const checkInvoiceType = (val: String) => {
  if (val) {
    let invoiceArr = val.split(',')
    const itemLength = invoiceArr.length
    let invoice = ''
    invoiceArr.forEach((item: any, index: number) => {
        if(item == '5'){
            invoice = invoice + '增值税普通发票'
        }else if(item == '10'){
            invoice = invoice + '增值税专用发票'
        }else if(item == '15'){
            invoice = invoice + '形式发票'
        }
        if(index < itemLength - 1 ){
            invoice = invoice + '/'
        }
    })
    return invoice
  }else{
    return '--'
  }
}
</script>

<style lang="scss" scoped>
.box-Details{
    padding: 0 20px;
}
.description{
    text-align: center;
}
</style>